import React from 'react';
import logo from './logo.svg';
import '../App.css';
import {
    Bubble,
    Sender,
    useXAgent,
    useXChat
} from '@ant-design/x';
import OpenAI from 'openai';
import { Typography, Flex  } from 'antd';
import markdownit from 'markdown-it';
import { UserOutlined } from '@ant-design/icons';

const apikey = 'sk-68ac5f5ccf3540ba834deeeaecb48987'
const BASE_URL = 'https://dashscope.aliyuncs.com/compatible-mode/v1'
// const BASE_URL = '/aliyuncs/compatible-mode/v1'
const model_name = 'qwen-plus'

const client = new OpenAI({
    baseURL: BASE_URL,
    apiKey: apikey,
    dangerouslyAllowBrowser: true,
});

const md = markdownit({ html: true, breaks: true });

const text = `
<think> 思考过程 </think>
<sql> SQL语句 </sql>
<result> 数据表格，markdown格式 </result>
<chart> 可视化图表 </chart>
`;
const renderMarkdown = (content: any) => (
  <Typography>
    {/* biome-ignore lint/security/noDangerouslySetInnerHtml: used in demo */}
    <div
      dangerouslySetInnerHTML={{
        __html: md.render(content),
      }}
    />
  </Typography>
);

function Demo() {
    const [renderKey, setRenderKey] = React.useState(0);
    React.useEffect(() => {
        const id = setTimeout(() => {
        setRenderKey((prev) => prev + 1);
        }, text.length * 100 + 2000);
        return () => {
        clearTimeout(id);
        };
    }, [renderKey]);
    return (
        <div className="App">
            <div
                style={{
                    height: 100,
                }}
                key={renderKey}
            >
            <Bubble
                typing
                content={text}
                messageRender={renderMarkdown}
                avatar={{
                    icon: <UserOutlined />,
                }}
            />
            </div>
        </div>
    );
}

export default Demo;
